<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    :close-on-click-modal="false"
  >
    <el-form ref="viewForm" label-width="80px" :model="user">
      <el-form-item label="账号" prop="userName">
        {{ user.userName }}
      </el-form-item>

      <el-form-item label="名称" prop="nickName">
        {{ user.nickName }}
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        {{ user.email }}
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        {{ sex(user.sex) }}
      </el-form-item>

      <el-form-item label="手机号码" prop="phoneNumber">
        {{ user.phoneNumber }}
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getUser } from '@/api/user/user'

export default {
  name: 'userEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      user: {}
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible === true && this.id !== '') {
        getUser(this.id).then(res => {
          this.user = res.data
        })
      }
    }
  },
  methods: {
    close() {
      this.$refs.viewForm.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    sex(value) {
      if (value === '0') {
        return '男'
      } else if (value === '1') {
        return '女'
      } else if (value === '2') {
        return '未知'
      } else {
        return ''
      }
    }
  }
}
</script>

<style></style>
